<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/libiao.css">
</head>
<body>
    <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
    <header>
        <div class="color">
        <div id="banxin1">
            <img id="shouji" src="images/images/关于我们_03.jpg" alt="" />
            <a href="" style="color: darkgray">手机版</a>
            <a href="" style="margin-left: 15px; color: darkgray">Q币充值</a>
            <span style="margin-left: 644px; line-height: 25px; color: darkgray"
              >您还未,</span
            >
            <a href="登录页.html">登录</a>
            <a href="" style="margin-left: 5px; color: darkgray">我的订单</a>
            <a href="" style="margin-left: 5px; color: darkgray">个人中心</a>
            <a href="" style="margin-left: 5px; color: darkgray">帮助中心</a>
            <span class="xS" style="margin-left: 15px; color: darkgray">游戏导航</span>
        </div>
    </div>
        <div id="bT">
            <div id="banxin2">
                <a href=""><img src="images/images/新版LOG_03.jpg" alt="" class="ccn"></a>
                <div class="stext">
                    <input type="text" placeholder="输入道具进行搜索" class="gaodu">
                    <img src="images/images/fJ_03.jpg" alt="" style="width: 49px; height:51 px; position: relative;top: -17px;left: 496px;">
                </div>
                <a href=""><img src="images/logo.png" alt="" class="logo"></a>
            </div>
        </div>
</header>
    <nav>
        <div class="sY">
            <div class="banxin3">
                <a href="道具城.html">首页</a>
                <a href="" style="font-size: 18px; color: #fff; background-color: #bf4d00;border-radius: 4px;">商品列表</a>
                <a href="">周边商城</a>
                <a href="">活动专区</a>
                <a href="">聚豆乐园</a>
                <a href="">会员聚乐部</a>
                <a href="">个人中心</a>
                <a href="购物车.html" style="color: #f74a4a;">购物车 &nbsp;<span>0</span></a>
            </div>
           <div class="banxin4">
            <div class="quanbu">
                    <a href="">全部道具</a>
                    <a href="">英雄级武器</a>
                    <a href="">投掷武器</a>
                    <a href="">功能性道具</a>
                    <a href="">道具</a>
                    <a href="">主武器</a>
                    <a href="">近战武器</a>
                    <a href="">副武器</a>
                    <a href="">礼包</a>
                    <a href="">角色</a>
            </div>
        </div>
        <div class="changtiao">
            <div class="banxin5">
                <div class="fl">您现在的位置:&nbsp;
                    <a href="道具城.html">穿越火线</a>
                    &nbsp;>全部道具
                </div>
            </div>
        </div>
        </div>

        
    </nav>
    <div id="news">
        <div id="banxin6">
        <div class="left">
            <div class="leftTop1">
                <h3>热门排行</h3>
                    <ul class="ten">
                        <li> <img src="images/images/01_03.jpg" alt="" class="small">
                            <img src="images/esc.jpg" alt="" class="max">
                        <a class="first" href="">清除中场退场记录</a>
                        <p class="zH">Q币价：&nbsp;5.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥4.85</a>
                        </li>

                        <li> <img src="images/images/02_03.jpg" alt="" class="small">
                            <img src="images/胜负.jpg" alt="" class="max">
                        <a class="first" href="">清除战绩胜负记录</a>
                        <p class="zH">Q币价：&nbsp;10.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥9.70</a>
                        </li>

                        <li> <img src="images/images/03_03.jpg" alt="" class="small">
                            <img src="images/烈龙.jpg" alt="" class="max">
                        <a class="first" href="">汤姆逊 -烈龙(...</a>
                        <p class="zH">Q币价：&nbsp;488.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥473.36</a>
                        </li>

                        <li> <img src="images/images/04_03.jpg" alt="" class="small">
                            <img src="images/昵称.jpg" alt="" class="max">
                        <a class="first" href="">彩色昵称(30天)</a>
                        <p class="zH">Q币价：&nbsp;10.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥9.70</a>
                        </li>

                        <li> <img src="images/images/05_03.jpg" alt="" class="small">
                            <img src="images/战队.jpg" alt="" class="max">
                        <a class="first" href="">战队徽章显示道具...</a>
                        <p class="zH">Q币价：&nbsp;5.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥4.85</a>
                        </li>

                        <li> <img src="images/images/06_03.jpg" alt="" class="small">
                            <img src="images/背包.jpg" alt="" class="max">
                        <a class="first" href="">4号背包(30天)</a>
                        <p class="zH">Q币价：&nbsp;5.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥4.85</a>
                        </li>

                        <li> <img src="images/images/07_03.jpg" alt="" class="small">
                            <img src="images/清零.jpg" alt="" class="max">
                        <a class="first" href="">清除杀敌/死亡记录</a>
                        <p class="zH">Q币价：&nbsp;15.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥14.55</a>
                        </li>

                        <li> <img src="images/images/08_03.jpg" alt="" class="small">
                            <img src="images/fuchou.jpg" alt="" class="max">
                        <a class="first" href="">复仇道具卡(1个)</a>
                        <p class="zH">Q币价：&nbsp;9.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥8.73</a>
                        </li>

                        <li> <img src="images/images/09_03.jpg" alt="" class="small">
                            <img src="images/永久4号.jpg" alt="" class="max">
                        <a class="first" href="">4号背包</a>
                        <p class="zH">Q币价：&nbsp;30.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥29.10</a>
                        </li>

                        <li> <img src="images/images/10_03.jpg" alt="" class="small">
                            <img src="images/永久6号.jpg" alt="" class="max">
                        <a class="first" href="">6号背包</a>
                        <p class="zH">Q币价：&nbsp;88.00Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥85.36</a>
                        </li>
                    </ul>
            </div>
            <div class="leftTop2">
                <h3>周边商城</h3>
                <ul class="leftTop2Z">
                    <li>
                        <img src="images/黑盒子.jpg" alt="" class="Z1">
                   <div class="one">
                       <p class="you">CF集线数据线三合一-黑侠</p>
                       <p class="my">￥49.00</p>
                   </div>
                    </li>
                  
                    <li>
                        <img src="images/手办.jpg" alt="" class="Z1">
                   <div class="one">
                       <p class="you">CF葵1/10正比例手办</p>
                       <p class="my">￥399.00</p>
                   </div>
                    </li>

                    <li>
                        <img src="images/雷神.jpg" alt="" class="Z1">
                   <div class="one">
                       <p class="you">M4A1-雷神英雄级手办模型</p>
                       <p class="my">￥298.00</p>
                   </div>
                    </li>

                    <li>
                        <img src="images/水杯.jpg" alt="" class="Z1">
                   <div class="one">
                       <p class="you">CF卡通杯垫</p>
                       <p class="my">￥25.00</p>
                       <div class="onebottom">
                       <a href="">更多></a>
                       </div>
                   </div>
                    </li>
                </ul>
            </div>
            <div class="leftTop3">
                <h3>历史记录</h3>
                <ul class="wan">
                        <li>
                            <img src="images/esc.jpg" alt="" class="picture">
                        <a class="first" href="">清除中场退场记录</a>
                        <p class="zH">Q币价：&nbsp;&nbsp;Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥4.85</a>
                    </li>

                    <li>
                        <img src="images/背包.jpg" alt="" class="picture">
                        <a class="first" href="">4号背包(30天)</a>
                        <p class="zH">Q币价：&nbsp;&nbsp;Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥4.85</a>
                    </li>

                    <li>
                        <img src="images/胜负.jpg" alt="" class="picture">
                        <a class="first" href="">清除战绩胜负记录</a>
                        <p class="zH">Q币价：&nbsp;&nbsp;Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥9.70</a>
                    </li>

                    <li>
                        <img src="images/昵称.jpg" alt="" class="picture">
                        <a class="first" href="">修改昵称</a>
                        <p class="zH">Q币价：&nbsp;&nbsp;Q币</p>
                        <a class="two" href="">微信价：&nbsp;￥14.55</a>
                    </li>
                </ul>
                <div class="leftbottom">
                    <a href="">清除历史记录</a>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="Top1">
                <div class="santiao">
                    <div class="zuoce1">
                        <span class="guanjianzi">关键字：</span>
                        <input type="text" class="kuang1">
                    </div>
                    <div class="zuoce2">
                        <span class="jiagequjian">价格区间(Q币)：</span>
                        <input type="text" class="kuang2">
                        <span class="jinahao">-</span>
                        <input type="text" class="kuang3">
                    </div>
                    <div class="zuoce3">
                        <input type="button" value="确定">
                    </div>
                </div>
                <div class="xiaoliang">
                    <div class="sanlian">
                        <span class="shangjiashijian">上架时间</span>
                        <span class="xiaoliango">销量^</span>
                        <span class="jiage">价格^</span>
                </div>
                </div>
            </div>
            <ul class="yidadui">
                
            </ul>

            <div class="rightdibu">
                <input type="text" placeholder="<上一页" class="shangyiye">
                <input type="text" value="1" class="diyige1">
                <input type="text" value="2" class="diyige2">
                <input type="text" value="3" class="diyige3">
                <input type="text" value="4" class="diyige4">
                <input type="text" value="5" class="diyige5">
                <input type="text" placeholder="下一页<" class="xiayiye">
                <span class="gong32">共32页&nbsp;到<input type="text" class="di5ge">页</span>
                <input type="button" value="确定" class="diyigequeding">
            </div>
        </div>
    </div>
    </div>
    <footer>
        <div class="banxin8">
            <div class="wugela">
        <div class="d1">
            <img src="images/images/小人_03.jpg" alt="" class="renren">
            <h4>我是新手</h4><br>
          <a href="">什么是道聚城</a><br>
          <a href="">如何购买</a><br>
          <a href="">如何赠送</a><br>
          <a href="">如何获取聚豆</a><br>
        </div>
        <div class="d2">
            <img src="images/images/问号_03.jpg" alt="" class="renren">
            <h4>个人中心</h4><br>
          <a href="">发货时间</a><br>
          <a href="">如何领取</a><br>
          <a href="">补发规则</a><br>
          <a href="">Vip价定义</a><br>
          <a href="">道具状态定义</a><br>
        </div>
        <div class="d3">
            <img src="images/images/支付_03.jpg" alt="" class="renren">
            <h4>支付方式</h4><br>
          <a href="">支付方式</a><br>
          <a href="">购物点支付</a><br>
          <a href="">如何充值</a><br>
        </div>
        <div class="d4">
            <img src="images/images/南山必胜客_03.jpg" alt="" class="renren">
            <h4>腾讯在线服务</h4><br>
          <a href="">腾讯官方在线客</a><br>
          <img src="images/工商.png" alt="" class="gs">
        </div>
        <div class="d5">
          <img src="images/车子.png" alt="" style="width: 100px;height: 100px;position: relative;top: 10px;margin-right: 18px;">
          <img src="images/小人.png" alt="" style="width: 100px;height: 100px;position: relative;top: 10px;">
          <p class="zD">掌上道具城</p>
          <p class="dC">道具城公众号</p>
        </div>
        </div>










        <p class="dishitiao">
        <a href="">腾讯互动娱乐|</a>
        <a href="">服务条款|</a>
        <a href="">腾讯游戏隐私保护指引|</a>
        <a href="">腾讯游戏儿童隐私保护指引|</a>
        <a href="">广告服务|</a>
        <a href="">腾讯游戏招聘|</a>
        <a href="">游戏地图|</a>
        <a href="">成长守护平台|</a>
        <a href="">商务合作|</a>
        <a href="">网站导航</a>
        </p>
        <p class="zuihou">
        <span>COPYRIGHT © 1998 – 2020 TENCENT. ALL RIGHTS RESERVED.</span>
        </p>
        <a href="" class="meile">腾讯公司&nbsp;版权所有</a>
          </div>
    </footer>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
       // 当网页向下滑动 20px 出现"返回顶部" 按钮
  window.onscroll = function() {scrollFunction()};
 
 function scrollFunction() {;
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("myBtn").style.display = "block";
     } else {
         document.getElementById("myBtn").style.display = "none";
     }
 }
  
 // 点击按钮，返回顶部
 function topFunction() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 }
</script>
<script>
    
$.get("getGoodsList.php",{"typeId":"002"},function(date){
    console.log("data1",date);
    good(date)
},"json")

let goods = document.querySelector(".yidadui").firstElementChild
function good(date){
    for(let i=0;i<date.length; i++){
        let str = "";
        str += `
            <li>
                 <a href="详情页.html?goodsId=${date[i].goodsId}"><img src="${date[i].goodsImg}" alt="" class="pictureo"></a>
                 <div class="dd">
                    <div class="pang">
                        <strong class="xiugainicheng">${date[i].goodsName}</strong>
                    </div>
                    <div class="xunihuobi">Q币价：&nbsp;
                            <span class="price1">${date[i].goodsDesc}</span>
                    </div>
                    <div class="xianshijinqian">微信价：&nbsp;
                        <span class="price2">￥${date[i].goodsPrice}</span>
                </div>
                 </div>
             </li>
             
        `
        $(".yidadui").prepend(str);
          // goods.innerHTML += str;    
    }
}

</script>